<template>
  <div  class="page-layout">
    <h1>DvChartLine</h1>
    <p>线状图表</p>

    <h2>DvChartLine Settings</h2>
    <pre> 
      下面为 DvChartLine 的 settings 配置： 
      {
        direction: { // 排列方向，即类别在哪个轴上
          type: String,
          default: 'x',
          validator(val) {
            return ['x', 'y'].includes(val)
          }
        },
        // 数据项的标签设置，字符类型设置position， 对象与原生series.label设置一致
        label: [String, Object, Array],
        
        // 值类型轴配置
        valueAxis: [String, Object, Array],
        
        // 堆叠柱，如 ['name1', 'name2']  或  {'name': ['name1', 'name2']}
        stack: [Object, Array],
        
        // 改成柱状图显示的系列
        bars: [String, Array],
        
        // 线条平滑，只对折线图有效
        smooth: {
          type: [Boolean, Number],
          default: 0.5
        },

        area: Boolean, // 是否显示线的区域
        rotate: Boolean,  
        cross: Boolean,
        legend: Boolean
      }
    </pre>

    <h2>example1 基本使用</h2>
    <textarea readonly style="width: 800px; height: 100px">
      <dv-chart-line :data="data1" fit ></dv-chart-line>
      const data1 = ref({
        columns: ['月份', '访问量'],
        rows: [ ['一月', 100], ['二月', 60], ['三月', 78], ['四月', 90], ['五月', 110], ['六月', 87], ['七月', 90], ['八月', 75], ['九月', 63], ['十月', 80], ['十一月', 90], ['十二月', 105]
        ]
    }) 
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-line :data="data1" fit ></dv-chart-line>
    </div>

    <h2>example2 settings使用</h2>
    <h3>
      settings.direction
    </h3>
    <textarea readonly style="width: 800px; height: 50px">
      <dv-chart-line :data="data1" fit :settings="{direction: 'y'}"></dv-chart-line> 
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-line :data="data1" fit :settings="{direction: 'y'}"></dv-chart-line>
    </div> 
    <br/>

    <h3>
      settings.label: 和 echart 的label 用法一样
    </h3>
    <textarea readonly style="width: 800px; height: 50px">
      <dv-chart-line :data="data1" fit :settings="{label: 'top'}"></dv-chart-line> 
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-line :data="data1" fit :settings="{label: 'top'}"></dv-chart-line>
    </div> 
    <br/>

    <h3>
      settings.valueAxis: 双Y轴 
    </h3>
    <textarea readonly style="width: 800px; height: 120px">
      <dv-chart-line :data="data2" fit :settings="{valueAxis: ['访问量', '留存率'], legend: true}" theme="dark" ></dv-chart-line> 
      const data2 = ref({
        columns: ['月份', '访问量', '留存率'],
        rows: [ 
          ['一月', 100, 30], ['二月', 60, 20], ['三月', 78, 25], 
          ['四月', 90, 40], ['五月', 110, 70], ['六月', 87, 60], 
          ['七月', 90, 76], ['八月', 75, 45], ['九月', 63, 46], 
          ['十月', 80, 70], ['十一月', 90, 85], ['十二月', 105, 96] 
        ]
    })
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-line :data="data2" fit :settings="{valueAxis: ['访问量', '留存率'], legend: true}" theme="dark"></dv-chart-line>
    </div>
    <br/>

    <h3>
      settings.stack 数据堆叠
    </h3>
    <textarea readonly style="width: 800px; height: 60px">
      <dv-chart-line :data="data2" fit :settings="{stack: ['访问量', '留存率']}" theme="dark" ></dv-chart-line>  
    </textarea>
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-line :data="data2" fit :settings="{stack: ['访问量', '留存率']}" theme="dark"></dv-chart-line>
    </div>  
    <br/>


    <h3>
      settings.bars 柱状混用
    </h3>
    <textarea readonly style="width: 800px; height: 60px">
      <dv-chart-line :data="data2" fit :settings="{valueAxis: ['访问量', '留存率'], bars: ['访问量']}"></dv-chart-line>  
    </textarea>
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-line :data="data2" fit :settings="{valueAxis: ['访问量', '留存率'], bars: ['访问量'], area: true, rotate: true, cross: true, legend: true}"  ></dv-chart-line>
    </div>  
    <br/><br/>

    <h3>
      settings 的 area（线区域）、 rotate（坐标文字旋转）、 cross（辅助线）、 legend（标签）
    </h3>
    <textarea readonly style="width: 800px; height: 60px">
      <dv-chart-line :data="data1" fit :settings="{area: true, rotate: true, cross: true, legend: true}"  ></dv-chart-line> 
    </textarea>
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid"  >
      <dv-chart-line :data="data1" fit :settings="{area: true, rotate: true, cross: true, legend: true}"  ></dv-chart-line>
    </div>  

    <br/><br/>

    <h2>
      结合dv-page
    </h2>
    <div style="width: 1000px;  ">
      <demo-warp>
        <dv-page target="parent" fit>
          <dv-box x-align="center" y-align="middle" width="80%" height="80%"  >
            <dv-chart-line :data="data1" fit :settings="{area: true, rotate: true, cross: true, legend: true}"  ></dv-chart-line>
          </dv-box>
        </dv-page>
      </demo-warp>
    </div> 

    <br/><br/>
    <h2>更多个性化配置</h2>
    <p>参考 图表组件 extend配置的用法， <router-link to="/example/extend-use">extend 配置使用</router-link></p>
    <br/><br/>
  </div>

</template>
<script setup lang="ts" >
import {DvPage, DvBox, DvChartLine} from '$comp/index';
import {ref} from 'vue'
const data1 = ref({
  columns: ['月份', '访问量'],
  rows: [
      ['一月', 100],
      ['二月', 60],
      ['三月', 78],
      ['四月', 90],
      ['五月', 110],
      ['六月', 87],
      ['七月', 90],
      ['八月', 75],
      ['九月', 63],
      ['十月', 80],
      ['十一月', 90],
      ['十二月', 105]
  ]
}) 

const data2 = ref({
  columns: ['月份', '访问量', '留存率'],
  rows: [
      ['一月', 100, 30],
      ['二月', 60, 20],
      ['三月', 78, 25],
      ['四月', 90, 40],
      ['五月', 110, 70],
      ['六月', 87, 60],
      ['七月', 90, 76],
      ['八月', 75, 45],
      ['九月', 63, 46],
      ['十月', 80, 70],
      ['十一月', 90, 85],
      ['十二月', 105, 96]
  ]
})
// import demoWarp from '@/components/demo-warp.vue';
</script>
<style lang="scss" scoped>
 .page-layout{
  height: 100%;
  .demo-box{

  }
 }
</style>